<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>旧件回收系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/html/index.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-pull-left mui-lefts">
				<img src="images/user.png" class="images_user" onerror="javascript:this.src='images/user.png';" />
			</a>
			<h1 class="mui-title">旧件回收系统</h1>
			<a class=" mui-pull-right mui-lefts">
				<div class="images-icons">
					<img src="images/huishou_1.png" class="images_icon" onerror="javascript:this.src='images/user.png';" />
					<p class="images-icons-p">回收记录</p>
				</div>
				<div class="images-icons">
					<img src="images/shoucang.png" class="images_icon shoucang" onerror="javascript:this.src='images/user.png';" />
					<p class="images-icons-p">收藏</p>
				</div>
			</a>

			<div class="sousuo">
				<div class="sousuo-input">

					<div class="sousuo-inpu-lsd">
						<img src="images/hy-sousuo.png" class="images-sousuo" />
						<input type="text" name="" id="" value="" placeholder="请输入案件号" />
						<div class="suo0div">
							搜索
						</div>
					</div>
				</div>

			</div>
		</header>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<!--<ul class="mui-table-view"></ul>-->

				<div class="" id="movies">
					<div class="anJian-one" v-for="item in movies">
						<div class="anJian-two">
							<div class="anJian-three">
								<div class="anJian-four">
									<p class="anjian-p mui-ellipsis"><span>案件编号:</span>&nbsp;&nbsp;<span class="anjian-p-two">{{item.a}}</span></p>
									<p class="anjian-p mui-ellipsis"><span>定损人&nbsp;&nbsp;&nbsp;&nbsp;:</span>&nbsp;&nbsp;<span class="anjian-p-two">{{item.b}}</span></p>
									<p class="anjian-p mui-ellipsis"><span>回收公司:</span>&nbsp;&nbsp;<span class="anjian-p-two">{{item.c}}</span></p>
								</div>
								<div class="anJian-five">
									<p class="times-div">{{item.d}}</p>
									<p class="yes-huishou not-huishou">已回收</p>
								</div>
							</div>
							<div class="anJian-six">
								<div class="anJian-six-chaKan">
									<div class="anJian-six-chaKan-tex" @tap="tap_tanchu(item)">
										查看旧件
									</div>
								</div>
								<div class="anJian-six-shoucang">
									<img src="images/shoucang.png" class="shoucang-Image" onerror="javascript:this.src='images/user.png';" />

								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>

		<script>
			//Vue数据
			var data_movies = new Vue({
				el: '#movies',
				data: {
					movies: []
				}
			});

			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			var count = 0;
			var countAll = 1;

			// 上拉加载
			function pullupRefresh() {
				setTimeout(function() {
					//					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					//					var table = document.body.querySelector('.mui-table-view');
					//					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					//					var newCount = cells.length > 0 ? 5 : 20; //首次加载20条，满屏
					//					for(var i = cells.length, len = i + newCount; i < len; i++) {
					//						var li = document.createElement('li');
					//						li.className = 'mui-table-view-cell';
					//						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
					//						table.appendChild(li);
					//					}

					var data = getSBstatu_baojing_Page(2, true);
				}, 1000);
			}

			//			function addData() {
			//				var table = document.body.querySelector('.mui-table-view');
			//				var cells = document.body.querySelectorAll('.mui-table-view-cell');
			//				for(var i = cells.length, len = i + 5; i < len; i++) {
			//					var li = document.createElement('li');
			//					li.className = 'mui-table-view-cell';
			//					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
			//					//下拉刷新，新纪录插到最前面；
			//					table.insertBefore(li, table.firstChild);
			//				}
			//			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
										var data = getSBstatu_baojing_Page(1, false);
					//					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					//					mui.toast("为你推荐了5篇文章");
				}, 1500);
			}

			// 获取 分页数据  
			function getSBstatu_baojing_Page(ids, flags) {
				var data = "";
				var pageNo = count;
				//				var dataone = {
				//					"userId": userId,
				//					"alarmStatu": ids,
				//					"pageNo": pageNo,
				//				};
				//				$.ajax({
				//					type: "POST",
				//					url: urlHear + "/cms/webpage/api/getAlarmList.jsp",
				//					data: dataone,
				//					contentType: 'application/json',
				//					dataType: "json",
				//					success: function(datas) {
				var datas = {
					"pageTotal": 10,
					"data": [{
							"id": 1, // id
							"a": "H24546", // 公司编号
							"b": "王小丽", // 人员名称
							"c": "南京环保回收有限公司", //公司名称
							"d": "1", // 回收状态
							"e": "2018-06-28", //时间
							"f": "1", //收藏状态
							"g": "",
						},
						{
							"id": 2, // id
							"a": "H24546", // 公司编号
							"b": "王小丽", // 人员名称
							"c": "南京环保回收有限公司", //公司名称
							"d": "1", // 回收状态
							"e": "2018-06-28", //时间
							"f": "1", //收藏状态
							"g": "",
						},
						{
							"id": 2, // id
							"a": "H24546", // 公司编号
							"b": "王小丽", // 人员名称
							"c": "南京环保回收有限公司", //公司名称
							"d": "1", // 回收状态
							"e": "2018-06-28", //时间
							"f": "1", //收藏状态
							"g": "",
						},
						{
							"id": 2, // id
							"a": "H24546", // 公司编号
							"b": "王小丽", // 人员名称
							"c": "南京环保回收有限公司", //公司名称
							"d": "1", // 回收状态
							"e": "2018-06-28", //时间
							"f": "1", //收藏状态
							"g": "",
						}
					]
				}
				data = datas;
				countAll = datas.pageTotal;
				if(flags) {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > countAll)); //参数为true代表没有更多数据了。
					data_movies.movies = data_movies.movies.concat(convert(data));
//结束下拉
				} else {
					data_movies.movies.splice(0, data_movies.movies.length);
					data_movies.movies = data_movies.movies.concat(convert(data));
					//结束下拉
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					//下拉的操作，如果无更多信息后，调用结束上拉并且传true会禁用上拉。如果需要重新开启下拉，则需要刷新组件
					mui('#pullrefresh').pullRefresh().refresh(true);
				}
				//					},
				//					err: function(data) {
				//						mui.toast("暂无数据");
				//						countAll = 1;
				//					}
				//
				//				});
				console.log(data);
				return data;

			}

			//数据转换
			function convert(data) {
				var newItems = [];
				//遍历items
				for(var i = 0; i < data.data.length; i++) {
					newItems.push({
						id: data.data[i].id,
						a: data.data[i].a,
						b: data.data[i].b,
						c: data.data[i].c,
						d: data.data[i].d,
						e: data.data[i].e,
						f: 7,
					});
				}
				console.log(newItems);
				return newItems;
			}
			
			function tap_tanchu(){
				window.location.href="anjian-details.html";
			}
		</script>
	</body>

</html>